<template>
  <div>
    <span class="title">{{'测试包中-'}}<a @click.prevent="goBack" class="back-class" href="#">测试包中</a></span>
    <el-row>
      <el-col :span="20">
        <el-card>
          <el-form :model="formData">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="所属模块">
                  <select-project-module data="URL" :column="[{ field: 'Name', title: '模块名称' }]"
                                         :queryValue="queryValue" placeholder="请选择所属模块"
                                         v-model="formData.Moduleid" style="width: 100%"></select-project-module>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用例类型">
                  <select-diction v-model="formData.Type" DictTypeCode="CASE_TYPE" placeholder = "请选择用例类型" style="width: 100%"></select-diction>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="重要程度">
                  <select-diction v-model="formData.Degree" DictTypeCode="CASE_ZYCD" placeholder = "请选择重要程度" style="width: 100%"></select-diction>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="维护负责人">
                  <select-project-team v-model="formData.Acceptid" :column="[{field: 'Userrealname'}]" :clearable="true"
                                       placeholder = "请选择维护负责人" :queryValue="queryValue"
                                       :showValueShow="[]" style="width: 100%"></select-project-team>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="标题">
                  <el-input v-model="formData.Name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>前置条件</div>
                <el-form-item>
                  <wangeditor placeholder="请输入前置条件" v-model="formData.Remarks" style="width: 100%"></wangeditor>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>备注</div>
                <el-form-item>
                  <wangeditor placeholder="请输入备注" v-model="formData.Remarks" style="width: 100%"></wangeditor>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <vxe-grid
                    border
                    context-menu
                    highlight-hover-row
                    show-overflow
                    resizable
                    height="300"
                    :edit-config="{trigger: 'click', mode: 'row'}"
                    :data.sync="formData.TestCaseStep"
                    ref="grid">
                  <vxe-table-column field="Sort" title="#" sortable width="100">
                    <template #default="{ row }">
                      <div class="drag-btn">
                        <span>{{row.Sort}}</span>
                      </div>
                    </template>
                  </vxe-table-column>
                  <vxe-table-column field="Stepdesc" title="步骤描述"></vxe-table-column>
                  <vxe-table-column field="Expectedresults" title="预期结果" width="300"></vxe-table-column>
                  <vxe-table-column field="Results" title="结果" :edit-render="{name: '$select', options: selectList }" width="100"></vxe-table-column>
                  <vxe-table-column field="Remarks" title="备注" :edit-render="{name: '$input', props: {type: 'text'}}" width="300"></vxe-table-column>
                </vxe-grid>
              </el-col>
            </el-row>
            <div style="display: flex; justify-content: space-between">
              <div>
                <vxe-checkbox v-model="nextCheckBox" content="继续执行下一条"></vxe-checkbox>
              </div>
              <div style="display: flex;">
                <vxe-button size="small" content="取消" @click="goBack"></vxe-button>
                <vxe-button size="small" status="primary" content="通过" :loading="saveLoading" @click="adoptClick"></vxe-button>
                <div style="display: flex; align-items: center">
                  <i class="vxe-icon--arrow-left" style="font-size: 24px; cursor: pointer;" @click="preClick"></i>
                  <span>{{opearIndex.curIndex}} / {{opearIndex.totalIndex}}</span>
                  <i class="vxe-icon--arrow-right" style="font-size: 24px; cursor: pointer;" @click="nextClick"></i>
                </div>
              </div>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card header="活动">
          <div style="display: flex; justify-content: space-between">
<!--            <span>执行了用例</span>-->
<!--            <span>熊xx  2020-11-10</span>-->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SelectProjectModule from "@/components/element/select/SelectProjectModule";
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import wangeditor from '@/components/element/wangeditor/index';
import SelectDiction from "@/components/element/SelectDiction";
import testCasePackApi from "@/api/testCasePackApi";
import testCaseApi from "@/api/testCaseApi";

export default {
  name: "packTestCaseRecord",
  components: {
    SelectProjectModule,
    SelectProjectTeam,
    wangeditor,
    SelectDiction
  },
  data () {
    return {
      saveLoading: false,
      selectList: [
        { label: '通过', value: '1' },
        { label: '受阻', value: '2' },
        { label: '失败', value: '3' },
        { label: '跳过', value: '4' }
      ],
      nextCheckBox: false,
      queryValue: {
        id: ''
      },
      preData: {},
      formData: {
        TestCaseStep: []
      },
      packData: [],
      opearIndex: {
        curIndex: 0,
        totalIndex: 0
      }
    }
  },
  mounted() {
    let w = this.$route.params.id
    w = this.StringDecode(w)
    w = decodeURIComponent(w)
    this.preData = JSON.parse(w)
    this.initView()
    this.initData(this.preData)
  },
  methods: {
    // 通过点击
    adoptClick () {
      this.saveLoading = true
      testCaseApi.createCase(this.formData).then(res => {
        this.$message({ type: res.code === 1 ? 'success' : 'warning', message: res.message })
        if (res.code === 1) {
          if (this.nextCheckBox) {
            this.nextClick('resultNext')
          } else {
            this.goBack()
          }
        }
      }).finally(() => {
        this.saveLoading = false
      })
    },
    // 上一条
    preClick () {
      if (this.opearIndex.curIndex > 1) {
        this.opearIndex.curIndex = this.opearIndex.curIndex - 1
        this.getCaseData({
          Id: this.packData[this.opearIndex.curIndex - 1].Caseid
        })
      }
    },
    // 下一条
    nextClick (type) {
      if (this.opearIndex.curIndex < this.opearIndex.totalIndex) {
        this.opearIndex.curIndex = this.opearIndex.curIndex + 1
        this.getCaseData({
          Id: this.packData[this.opearIndex.curIndex - 1].Caseid
        })
      } else {
        if (type) {
          this.goBack()
        }
      }
    },
    initView () {
      this.queryValue = {
        id: this.preData.Id
      }
    },
    goBack () {
      this.$router.push(`/view/project/packTestCase/${this.preData.pkgid}`)
    },
    initData (w) {
      this.packData = []
      testCasePackApi.PkgCasePage({
        Id: w.Id,
        pkgid: w.pkgid
      }).then(res => {
        if (res.Modules) {
          this.packData = res.Modules
          this.opearIndex.curIndex = this.packData.findIndex(it => it.Id === w.kid) + 1
          this.opearIndex.totalIndex = this.packData.length
          this.getCaseData({
            Id: this.packData[this.opearIndex.curIndex - 1].Caseid
          })
        } else {
          this.$message.warning('请先获取正确的包中用例')
        }
      })
    },
    // 通过包中获取用例信息
    getCaseData (data) {
      this.formData = {
        TestCaseStep: []
      }
      testCaseApi.getCaseById(data).then(res => {
        this.formData = Object.assign(this.formData, res)
        this.formData.TestCaseStep = this.formData.TestCaseStep || []
        this.formData.TestCaseStep.forEach(it => {
          this.$set(it, 'Results', it.Results || '')
        })
      })
    }
  }
}
</script>

<style scoped>

</style>